<template>
  <div>
    <div class="colContent progress list-table" style=" ">
      <div class="area-header">
        <span class="area-header-title">{{ $t('项目跟踪') }}</span>
      </div>
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item :label="$t('项目名称')" prop="dealName">
          <el-input
            v-model="queryParams.dealName"
            :placeholder="$t('项目名称')"
            clearable
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item :label="$t('负责人')" prop="personChargeName">
          <el-input v-model="queryParams.personChargeName" :placeholder="$t('负责人')" clearable />
        </el-form-item>
        <el-form-item :label="$t('创建人')" prop="createUserName">
          <el-input v-model="queryParams.createUserName" :placeholder="$t('创建人')" clearable />
        </el-form-item>
        <el-form-item :label="$t('项目状态')" prop="dealStatus">
          <dict-select
            v-model="dealStatus"
            multiple
            dictionary="deal_status"
          />
        </el-form-item>
        <el-form-item :label="$t('关注等级')" prop="dealStatus">
          <dict-select
            v-model="queryParams.levelConcern"
            dictionary="level_concern"
          />
        </el-form-item>
        <el-form-item :label="$t('详细情况')" prop="details">
          <el-input v-model="queryParams.details" :placeholder="$t('详细情况')" />
        </el-form-item>
        <el-form-item :label="$t('跟踪时间')" prop="trackTime">
          <dict-select
            v-model="queryParams.trackTime"
            dictionary="track_time"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['deal:track:edit']"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addHandle"
          >{{ $t("新增") }}</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="exportHandle"
          >{{ $t("导出") }}</el-button>
        </el-col>
      </el-row>
      <el-table ref="table" v-loading="loading" :row-class-name="rowClassName" :data="trackInfoList" max-height="600" border @row-click="rowClick">
        <el-table-column align="center" prop="dealName" :label="$t('项目名称')" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            <router-link
              target="_blank"
              :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
              :style="scope.row.lastMonth ? '' : 'color:red'"
              class="link_a"
            >{{ scope.row.dealName }}</router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="personChargeName" :label="$t('负责人')" min-width="90" />
        <el-table-column v-if="hiddenColumn" :label="$t('最近一周')" min-width="250" prop="lastWeek" class-name="alinTop">
          <template slot-scope="scope">
            <div class="progressTimeLine">
              <el-row v-for="(item, index) in scope.row.lastWeek" :key="index">
                <div size="mini" class="progressItem" @click="viewTrack(item)">
                  <div v-if="item.msgCount > 1" class="msgCount">
                    <svg-icon icon-class="message" />
                    <span class="icon">{{ item.msgCount }}</span>
                  </div>
                  <p class="tit">
                    <span class="text">{{ formatText(item.details) }}</span>
                  </p>
                  <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                  <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                  <div class="bottom">
                    <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                    <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                  </div>
                  <div class="bottom">
                    <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                    <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                  </div>
                  <div v-if="item.fileList && item.fileList.length > 0" class="fileList" style="border-top: 1px solid #eee">
                    <p v-for="file in item.fileList" :key="file.id" style="color: #1890ff" @click.stop="preview(file.id,'view')">{{ file.name }}</p>
                  </div>
                </div>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="hiddenColumn" :label="$t('上一周')" min-width="250" prop="pastWeek" class-name="alinTop">
          <template slot-scope="scope">
            <div class="progressTimeLine">
              <el-row v-for="(item, index) in scope.row.pastWeek" :key="index">
                <div size="mini" class="progressItem" @click="viewTrack(item)">
                  <div v-if="item.msgCount > 1" class="msgCount">
                    <svg-icon icon-class="message" />
                    <span class="icon">{{ item.msgCount }}</span>
                  </div>
                  <p class="tit">
                    <span class="text">{{ formatText(item.details) }}</span>
                  </p>
                  <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                  <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                  <div class="bottom">
                    <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                    <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                  </div>
                  <div class="bottom">
                    <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                    <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                  </div>
                  <div v-if="item.fileList && item.fileList.length > 0" class="fileList" style="border-top: 1px solid #eee">
                    <p v-for="file in item.fileList" :key="file.id" style="color: #1890ff" @click.stop="preview(file.id,'view')">{{ file.name }}</p>
                  </div>
                </div>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('历史三次跟踪')" min-width="250" prop="historyNearlyThree">
          <template slot-scope="scope">
            <div class="progressTimeLine">
              <el-row v-for="(item, index) in scope.row.historyNearlyThree" :key="index">
                <div size="mini" class="progressItem" @click="viewTrack(item)">
                  <div v-if="item.msgCount > 1" class="msgCount">
                    <svg-icon icon-class="message" />
                    <span class="icon">{{ item.msgCount }}</span>
                  </div>
                  <p class="tit">
                    <span class="text">{{ formatText(item.details) }}</span>
                  </p>
                  <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                  <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                  <div class="bottom">
                    <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                    <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                  </div>
                  <div class="bottom">
                    <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                    <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                  </div>
                  <div v-if="item.fileList && item.fileList.length > 0" class="fileList" style="border-top: 1px solid #eee">
                    <p v-for="file in item.fileList" :key="file.id" style="color: #1890ff" @click.stop="preview(file.id,'view')">{{ file.name }}</p>
                  </div>
                </div>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('全部跟踪信息')" align="center" min-width="120">
          <template slot-scope="scope">
            <el-button size="mini" class="el-button el-button--text el-button--small" @click="trackList(scope.row)">{{ $t('查看全部') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('项目风险')" align="center" min-width="120">
          <template slot-scope="scope">
            <el-button size="mini" class="el-button el-button--text el-button--small" @click="riskList(scope.row)">{{ $t('查看全部') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('项目阶段')" align="center" prop="dealStage" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <span>{{ $t(scope.row.dealStage) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('项目状态')" align="center" prop="dealStatus" show-overflow-tooltip min-width="100" :formatter="statusFormat" />
        <el-table-column :label="$t('创建人')" align="center" prop="createBy.nickName" min-width="90" />
        <el-table-column :label="$t('创建时间')" align="center" prop="createTime" min-width="110">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="pageChangeHandle"
      />
    </div>

    <el-dialog :title="trackListTitle" :visible.sync="trackListOpen" width="80%" :close-on-click-modal="false" :lock-scroll="false" @close="closeDialog">
      <dealTrackList ref="dealTrackList" />
    </el-dialog>

    <el-dialog :title="$t('项目风险')" :visible.sync="riskListOpen" width="80%" :close-on-click-modal="false" :lock-scroll="false">
      <dealRiskList ref="dealRiskList" :deal-id="dealId" />
    </el-dialog>

    <!-- 添加或修改项目跟踪对话框 -->
    <el-dialog :title="title" :visible.sync="formOpen" :close-on-click-modal="false" custom-class="dialogForm" :lock-scroll="false" append-to-body>
      <dealTrackForm ref="dealTrackForm" />
    </el-dialog>

    <!-- 附件预览  -->
    <OnlinePreview ref="OnlinePreview" :preview-tit="previewTit" />
  </div>
</template>
<script>
import { trackInfo } from '@/api/deal/track/dealTrack'
import dealTrackList from '@/views/deal/track/dealTrackList'
import dealRiskList from '@/views/deal/risk/dealRiskList'
import dealTrackForm from '@/views/deal/track/dealTrackForm'
export default {
  components: {
    dealTrackList,
    dealRiskList,
    dealTrackForm
  },
  data() {
    return {
      // table表格数据
      trackInfoList: [],
      // 遮罩层
      loading: false,
      trackListOpen: false,
      previewTit: '',
      // 查看项目跟踪标题
      trackListTitle: '',
      riskListOpen: false,
      formOpen: false,
      title: '',
      // 总条数
      total: 0,
      // 事项类型 字典item_type字典
      itemTypeOptions: [],
      // 跟踪方式 字典track_mode字典
      trackModeOptions: [],
      myChart: null,
      dealStatus: [],
      queryParams: {
        dealName: undefined,
        personChargeName: undefined,
        dealStatus: undefined,
        trackTime: undefined,
        levelConcern: undefined,
        createUserName: undefined,
        pageNum: 1,
        pageSize: 10,
        details: undefined
      },
      dealId: undefined,
      hiddenColumn: true,
      currentTrack: null,
      dealStatusOptions: []
    }
  },
  computed: {

  },
  created() {
    this.getDicts('item_type').then(response => {
      this.itemTypeOptions = response.data
    })
    this.getDicts('track_mode').then(response => {
      this.trackModeOptions = response.data
    })
    this.getDicts('deal_status').then(res => {
      this.dealStatusOptions = res.data
    })
    this.getList()
  },
  mounted: function() {

  },

  methods: {
    rowClassName({ row }) {
      if (this.currentTrack !== null && row.dealId === this.currentTrack.dealId) {
        return 'current-row'
      } else {
        return ''
      }
    },
    pageChangeHandle() {
      this.getList()
      this.$refs.table.bodyWrapper.scrollTop = 0
    },
    // 事项类型 字典item_type字典翻译
    itemTypeFormat(row) {
      return this.selectDictLabel(this.itemTypeOptions, row)
    },
    // 跟踪方式 字典track_mode字典翻译
    trackModeFormat(row) {
      return this.selectDictLabel(this.trackModeOptions, row)
    },
    /** 预览文件 */
    preview(fileId, type) {
      type === 'review' ? this.previewType = 'review' : this.previewType = 'view'
      this.$refs.OnlinePreview.onlinePreviewFile(fileId, type)
    },
    getList() {
      this.loading = true
      this.hiddenColumn = !this.queryParams.trackTime
      this.queryParams.dealStatus = this.dealStatus.join(',')
      console.log(this.queryParams)
      trackInfo(this.queryParams).then(response => {
        this.trackInfoList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    statusFormat(row) {
      return this.selectDictLabel(this.dealStatusOptions, row.dealStatus)
    },
    trackList(row) {
      this.trackListOpen = true
      this.trackListTitle = row.dealName + ' - ' + this.$t('项目跟踪')
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealTrackList.queryParams.dealId = row.dealId
        this.$refs.dealTrackList.getList()
      })
    },
    riskList(row) {
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.dealId = row.dealId
        this.riskListOpen = true
        this.$refs.dealRiskList.getList()
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.dealStatus = []
      this.queryHandle()
    },
    formatText(htmlStr) {
      if (!htmlStr) return ''
      return htmlStr.replace(/<\/?.+?>/g, '').replace(/ /g, '').replace(/&nbsp;/ig, '')
    },
    viewTrack(item) {
      this.formOpen = true
      this.title = this.$t('项目跟踪')
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealTrackForm.init(item)
      })
    },
    // 关闭dialog时的回调
    closeDialog() {
      this.getList()
    },
    /** 新增按钮操作 */
    addHandle() {
      this.formOpen = true
      this.title = this.$t('项目跟踪')
      this.$nextTick(() => {
        this.$refs.dealTrackForm.init(this.currentTrack)
      })
    },
    /** 导出按钮操作 */
    exportHandle() {
      this.downLoadExcel('/track/dealTrack/exportReport', this.queryParams)
    },
    // 点击当前行
    rowClick(row) {
      if (this.currentTrack !== null && row.dealId === this.currentTrack.dealId) {
        this.$refs.table.setCurrentRow(null)
        this.currentTrack = null
      } else {
        this.$refs.table.setCurrentRow(row)
        this.currentTrack = row
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
  /* autoprefixer: off */
  display:-webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  /* autoprefixer: on */
  max-height: 50px
}
.msgCount{
  position: relative;
  display: inline-block;
  float: right;
  padding: 0 3px 0 0;
  margin-left: 10px;
  .icon{
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    right: -8px;
    top: -3px;
    zoom: 0.9;
  }
}
</style>
